<template>
  <div class="messagebulletin" style="width: 98%">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="dataForm" ref="dataForm">
        <el-row :gutter="5">
          <el-col :span="5">
            <el-form-item prop="messageTitle">
              <el-input
                v-model="dataForm.messageTitle"
                placeholder="请输入消息标题"
              >
                <template slot="prepend">消息标题</template>
              </el-input>
            </el-form-item>
          </el-col>
          </el-col>
          <el-col :span="5">
            <el-form-item prop="messageSender">
              <el-input
                v-model="dataForm.messageSender"
                placeholder="请输入发送人"
              >
                <template slot="prepend">发送人</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="" prop="receptionType">
              <div class="depart-box">
                <div class="slect-title">接收类型</div>
                <el-select
                  v-model="dataForm.receptionType"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in receptionType"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="" prop="messageStatus">
              <div class="depart-box">
                <div class="slect-title">消息状态</div>
                <el-select
                  v-model="dataForm.messageStatus"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="item in messageStatus"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="createDate">
              <div class="depart-date">
                <div class="slect-title" style="width: 14%">创建时间</div>
                <el-date-picker
                  style="float: left; width: 73%"
                  v-model="dataForm.createDate"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          @click="resetForm('dataForm')"
          perms="true"
          type="primary"
        />
        <kt-button
          :label="$t('action.search')"
          @click="searchForm"
          :loading="editLoading"
          perms="true"
          type="primary"
        />
      </div>
    </div>
    <div class="add-btns">
      <kt-button
        :label="$t('action.addmessage')"
        perms="MessageManagement:MessageBulletin:add"
        @click="jump"
        type="primary"
      />
    </div>

    <kt-table
      permsEdit="MessageManagement:MessageBulletin:edit"
      message
      permsDelete="MessageManagement:MessageBulletin:delete"
      permsSee="MessageManagement:MessageBulletin:see"
      :data="pageResult"
      :columns="columns"
      @changeSwitch="changeSwitch"
      @findPage="findPage"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @handleSee="handleSee"
    >
    </kt-table>
  </div>
</template>

<script>
import CrmTreeInput from "@/components/CrmTreeInput";
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import KtTable from "@/views/Core/KtTable";
import axios from "axios";
export default {
  name: "messagebulletin",
  components: {
    PopupTreeInput,
    KtButton,
    KtTable,
    CrmTreeInput,
  },
  data() {
    return {
      size: "small",
      // filters: {
      //   name: ""
      // },
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "messageTitle", label: "消息标题", minWidth: 150 },
        { prop: "summary", label: "消息摘要", minWidth: 280 },
        { prop: "messageSender", label: "发送人", minWidth: 80 },
        { prop: "receptionTypeName", label: "接收类型", minWidth: 120 },
        {
          prop: "createDate",
          sortable: "true",
          label: "创建时间",
          minWidth: 140,
        },
        { prop: "messageStatusValue", label: "消息状态", minWidth: 100 },
      ],
      pageRequest: { pageNum: 1, pageSize: 8 },
      pageResult: {
        content: [],
        totalSize: "",
      },
      operation: false, // true:新增, false:编辑
      editLoading: false,
      OEM: true,
      dataFormRules: {
        assignor: [
          { required: true, message: "请选择分中心", trigger: "blur" },
        ],
      },
      // 界面数据
      dataForm: {
        messageTitle: "",
        messageContent: "",
        messageSender: "",
        receptionType: "",
        createDate: "",
        messageStatus: "",
        receptionTypevalue: "",
        messageStatusvalue: "",
      },
      //新增数据
      dataFormAdd: {
        createDate: "",
        creater: 0,
        id: "",
        messageContent: "",
        messageReceivorList: [
          // {
          //   deptName: "",
          //   id: "",
          //   isRead: "",
          //   messageId: "",
          //   userId: "",
          //   userName: ""
          // }
        ],
        messageSender: "",
        messageStatus: "",
        messageTitle: "",
        publishType: "",
        receptionType: "1",
        sendDate: "",
      },
      receptionType: [], // 接收类型下拉框
      messageStatus: [], // 消息状态下拉框
      messageProps: {
        label: "value",
        children: "children",
      },
    };
  },
  methods: {
    //路由跳转
    jump() {
      this.$router.push({ path: "/MessageManagement/NewMessage" });
    },
    jumpEdit(messageId) {
      this.$router.push({
        path: "/MessageManagement/NewMessage",
        query: { id: messageId },
      });
    },
    jumpSee(messageId) {
      this.$router.push({
        path: "/MessageManagement/NewMessage",
        query: { id: messageId, see: 1 },
      });
    },
    //获取下拉列表
    findDown: function () {
      this.$api.dropdown.messageType().then((res) => {
        this.receptionType = res.keyValueList;
      });
      this.$api.dropdown.messageStatus().then((res) => {
        this.messageStatus = res.keyValueList;
      });
    },
    // 下拉框选中选中
    handleTreeSelectChange(data, node) {
      this.dataForm.receptionType = data.key;
      this.dataForm.receptionTypevalue = data.value;
    },
    handleTreeSelectChange2(data, node) {
      this.dataForm.messageStatusvalue = data.value;
      this.dataForm.messageStatus = data.key;
    },
    //表单重置
    resetForm(dataForm) {
      this.dataForm = {
        messageTitle: "",
        messageContent: "",
        messageSender: "",
        receptionType: "",
        createDate: "",
        messageStatus: "",
        receptionTypevalue: "",
        messageStatusvalue: "",
      };
      this.data = {};
      this.$refs[dataForm].resetFields();
      this.editLoading = false;
      this.findPage(null);
    },
    // 获取分页数据
    findPage: function (data) {
      if (data !== null) {
        this.pageRequest = {};
        this.pageRequest = data.pageRequest;
      }
      this.pageRequest = Object.assign({}, { searchType: 1 }, this.pageRequest);
      // this.pageRequest.columnFilters = {
      //   name: { name: "name", value: this.filters.name }
      // };
      this.$api.message
        .findPage({ ...this.pageRequest, ...this.data })
        .then((res) => {
          this.pageResult.content = res.systemMessageList;
          this.pageResult.totalSize = res.total;
          if (this.pageResult.content) {
            this.pageResult.content.forEach((item) => {
              if (item.messageStatus == "1") {
                item.messageStatusValue = "启用";
              } else if (item.messageStatus == "2") {
                item.messageStatusValue = "停用";
              }
            });
          }
        })
        .then(data != null ? data.callback : "");
    },
    // 删除
    handleDelete: function (data) {
      let messageId = data.params[0].id;
      this.$api.message
        .batchDelete({ messageId: messageId })
        .then(data != null ? data.callback : "");
    },
    //switch开关
    changeSwitch: function (data) {
      let messageId = data.row.id;
      this.$api.message.messageStatus({ messageId: messageId }).then((res) => {
        if (res.result == 1) {
          this.$message({ message: res.msg, type: "success" });
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.data = {
              messageTitle: this.dataForm.messageTitle,
              messageSender: this.dataForm.messageSender,
              receptionType: this.dataForm.receptionType,
              messageStatus: this.dataForm.messageStatus,
              createStartDate: this.dataForm.createDate
                ? this.dataForm.createDate[0]
                : "",
              createStopDate: this.dataForm.createDate
                ? this.dataForm.createDate[1]
                : "",
            };
            let params = Object.assign({}, this.data, this.pageRequest);
            this.$api.message.findPage(params).then((res) => {
              this.pageResult.content = res.systemMessageList;
              this.pageResult.totalSize = res.total;
              this.pageResult.content.forEach((item) => {
                if (item.messageStatus == "1") {
                  item.messageStatusValue = "启用";
                } else if (item.messageStatus == "2") {
                  item.messageStatusValue = "停用";
                }
              });
            });
          }
        });
      });
    },
    //查询
    searchForm: function () {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.data = {
            messageTitle: this.dataForm.messageTitle,
            messageSender: this.dataForm.messageSender,
            receptionType: this.dataForm.receptionType,
            messageStatus: this.dataForm.messageStatus,
            createStartDate: this.dataForm.createDate
              ? this.dataForm.createDate[0]
              : "",
            createStopDate: this.dataForm.createDate
              ? this.dataForm.createDate[1]
              : "",
          };
          let params = Object.assign({}, this.data, this.pageRequest);
          this.$api.message.findPage(params).then((res) => {
            this.editLoading = false;
            if (res.result == 1) {
              this.pageResult.content = res.systemMessageList;
              this.pageResult.totalSize = res.total;
              this.pageResult.content.forEach((item) => {
                if (item.messageStatus == "1") {
                  item.messageStatusValue = "启用";
                } else if (item.messageStatus == "2") {
                  item.messageStatusValue = "停用";
                }
              });
              this.$message({ message: res.msg, type: "success" });
              // this.$refs["dataForm"].resetFields();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
            // this.findPage(null);
          });
        }
      });
    },

    // 菜单树选中
    deptTreeCurrentChangeHandle(data, node) {
      this.dataForm.deptId = data.id;
      this.dataForm.deptName = data.name;
    },
    //编辑
    handleEdit: function (params) {
      let messageId = params.row.id;
      this.jumpEdit(messageId);
    },
    //查看
    handleSee: function (params) {
      let messageId = params.row.id;
      this.jumpSee(messageId);
    },
    // 导出
  },
  watch: {
    $route(to, from) {
      this.findPage(null); //返回页面直接调取方法
    },
  },

  mounted() {
    this.findDown();
  },
};
</script>


<style >
@import url("../../assets/queryBox.css");
</style>
